import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Sudoku, Label } from 'iftide';

export default class Basic extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        const dataList_3 = [
            {
                'icon': require('./Icon.png'),
                'title': '投资理财',
                'titleStyle':{fontSize:12,color:'red'},
                'description1': '说明说明说明',
                'description2': ' ',
                'onPress': () => alert(1),
            },
            {
                'icon': require('./Icon.png'),
                'title': '账户转账',
                'description1': '说明说明说明说',
                'description2': '说明说明',
                'onPress': () => alert(2),
                'showBadge': true,
                'badge': '万2.6'
            },
            {
                'icon': require('./Icon.png'),
                'title': 'AI投',
                'description1': '说明说明说明说',
                'description2': '说明说明说明说',
                'onPress': () => alert(3),
                'showBadge': true,
                'badge': '万2.6',
                'badgePosition': 'rightTop'
            },
        ];

        const dataList_2 = [
            {
                'icon': require('./Icon.png'),
                'title': '投资理财',
                'onPress': () => alert(1),
            },
            {
                'icon': require('./Icon.png'),
                'title': '注册账户转账',
                'onPress': () => alert(2),
            },
        ];

        return (
            <View>
                <View style={[styles.container, {backgroundColor: '#F5F7F9'}]}>
                    <Label text = '宫格样式 - 横向' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <Sudoku columnCount={2} dataSource={dataList_2} isHorizontal={true} rowHeight={80}/>
                <View style={styles.divider}/>
                <Sudoku columnCount={3} dataSource={dataList_3} isHorizontal={true}  singleTitle={true} rowHeight={50}/>

            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 13,
        paddingVertical: 8,
        backgroundColor: '#F5F7F9'
    },
    divider: {
        height: 10,
        backgroundColor: '#F5F7F9'
    }
});